<template>
  <div class="box">
    <!-- <img class="banner" src="" /> -->
    <div class="banner">
      <div v-for="(item, index) in current" :key="index">
        <img
          style="width: 100%; height: 500px; object-fit: cover"
          v-if="item.alias == 'MainDrawing' && item.imgList.length"
          :src="item.imgList[0].url"
          alt=""
        />
      </div>
    </div>
    <div class="content-box">
      <a-row class="content-title">
        <a-col class="logo-text">招商</a-col>
        <a-col class="link">
          <span
            style="margin-right: 10px"
            v-for="(item, index) in linkList"
            :key="index"
            >{{ item.title }}</span
          >
        </a-col>
        <a-col>
          <img
            class="find-room"
            :src="$utils.staticPath + `images/village/findRoom.jpg`"
            alt=""
          />
        </a-col>
      </a-row>
    </div>
    <div style="width: 100%; background: #ffff">
      <div class="content-title">
        <a-row v-for="(item, index) in current" :key="index">
          <div class="content" v-if="item.alias == 'PromotionArea1'">
            <a-col
              class="icon-list"
              v-for="(image, imageIndex) in item.itemList"
              :key="imageIndex"
            >
              <div class="icon" v-if="image.imgList.length">
                <img class="img" :src="image.imgList[0].url" alt="" />
              </div>
              <div style="width: 60px">{{ image.title }}</div>
            </a-col>
          </div>
        </a-row>
      </div>
      <div class="content-title">
        <a-row
          align="middle"
          justify="space-between"
          v-for="(item, index) in current"
          :key="index"
        >
          <a-col v-if="item.alias == 'Entrusted' && item.imgList.length">
            <div class="find-house-img">
              <img
                style="width: 100%; height: 100%; object-fit: cover"
                :src="item.imgList[0].url"
              />
            </div>
          </a-col>
          <a-col
            v-if="item.alias == 'Entrusted' && !item.imgList.length"
            class="find-house-img"
          ></a-col>
          <a-col style="text-align: center" v-if="item.alias == 'Entrusted'">
            <div style="font-size: 20px; font-weight: 600; width: 300px">
              {{ item.title }}
            </div>
            <div style="margin: 10px 0; width: 300px">
              {{ item.content }}
            </div>
            <div>
              <a-button type="primary" class="find-house-button">
                免费委托
              </a-button>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div style="width: 100%; background: #ffff; margin-top: 10px">
      <div class="content-title">
        <a-row align="middle" class="promotionArea">
          <div v-for="(item, index) in current" :key="index">
            <a-col v-if="item.alias == 'PromotionArea2'">
              <div
                style="font-size: 18px; font-weight: 600; margin-bottom: 10px"
              >
                {{ item.title }}
              </div>
              <div>{{ item.content }}</div>
              <div></div>
            </a-col>
            <a-col
              class="promotionAreaImage"
              v-if="item.alias == 'PromotionArea2' && item.imgList.length"
            >
              <img
                style="width: 230px; height: 230px; object-fit: cover"
                :src="item.imgList[0].url"
              />
            </a-col>
          </div>
        </a-row>
      </div>
    </div>
    <div class="footer">
      <a-row class="footer-center">
        <a-col :span="8" class="pr-30">
          <div class="title">--</div>
          <div>{{ current[4].title }}</div>
        </a-col>
        <a-col :span="8" class="pr-30">
          <div class="title">联系地址</div>
          <div class="">{{ "--" }}</div>
          <div>（{{ "--" }}）</div>
        </a-col>
        <a-col :span="4">
          <div class="title">官方热线</div>
          <div class="">{{ "--" }}</div>
          <div>
            {{ " " }}
          </div>
        </a-col>
        <!-- <a-col :span="4" v-if="orgInfo.h5_url" class="code-wrap">
        <qrcode-vue :value="orgInfo.h5_url" :size="70" level="H" />
      </a-col> -->
      </a-row>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, ref, toRefs } from "vue";

export default defineComponent({
  name: "businessHome",
  props: {
    current: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup() {
    const state = reactive({
      //   bannerImage: require("./images/banner.png"),
      linkList: [
        {
          title: "优选好房",
        },
        {
          title: "找楼盘",
        },
        {
          title: "租商铺",
        },
        {
          title: "联合办公",
        },
        {
          title: "委托找房",
        },
        {
          title: "投放房源",
        },
        {
          title: "管理房源",
        },
        {
          title: "楼市资讯",
        },
      ],
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  .banner {
    width: 100%;
    height: 500px;
    object-fit: cover;
  }
  .content-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    .content-title {
      max-width: 800px;
      margin: 0 auto;
      align-items: center;
      .logo-text {
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        padding-bottom: 5px;
        margin-right: 180px;
      }
      .link {
        color: #fff;
        font-size: 16px;
        cursor: pointer;
      }
      .find-room {
        width: 300px;
        height: 340px;
        border-radius: 10px;
        margin-top: 20px;
      }
      .icon-list {
        padding: 30px 0;
        display: flex;
        align-items: center;
        .icon {
          width: 40px;
          height: 40px;
          margin-right: 20px;
          .img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .find-house-button {
        width: 300px;
        height: 48px;
        text-align: center;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
      }
      .content {
        width: 100%;
        display: flex;
        justify-content: space-around;
      }
      .find-house-img {
        width: 400px;
        height: 280px;
        box-shadow: 10px 0px 5px rgba(0, 0, 0, 0.1);
        .img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .promotionArea {
        position: relative;
        width: 100%;
        height: 150px;
        .promotionAreaImage {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }
  @footerHeight: 120px;
  .footer {
    height: @footerHeight;
    background: #202020;
    padding: 20px 100px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    .footer-center {
      max-width: 800px;
      height: 100%;
      margin: 0 auto;

      .pr-30 {
        padding-right: 30px;
      }

      .title {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
      }
      .bold {
        font-weight: bold;
      }

      .code-wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        opacity: 0.5;
      }

      :deep(.ant-col) {
        height: @footerHeight - 40;
        overflow: hidden;
      }
    }
  }
}
</style>
